<template>
  <div>
      <yd-navbar title="找回密码" fixed bgcolor='#fff' color="#000">
					<div @click="goback()" slot="left">
							<yd-navbar-back-icon  color="#000"></yd-navbar-back-icon>
					</div>
			</yd-navbar>
		 <div class="list">
			 <div class="boxt">
				<div class="infos">
					<span>
						<img src="../assets/login/wode.png" alt="">
						<span>用户名</span>
					</span>
					<input type="text" v-model="form.name" placeholder="请输入真实姓名">
				</div>
			</div>
			<div class="boxt">
				<div class="infos">
					<span>
						<img src="../assets/login/wode.png" alt="">
						<span>手机号码</span>
					</span>
					<input type="text" v-model="form.phone" placeholder="请输入手机号码">
				</div>
			</div> 
			<div class="boxt">
				<div class="infos">
					<b>
						<img src="../assets/login/duanxing.png" alt="">
					</b>
					<input type="text" v-model="form.num" placeholder="请输入短信验证码">
					<yd-sendcode slot="right" 
												v-model="start1" 
												@click.native="sendCode1" 
												type="danger"
					></yd-sendcode>
				</div>
			</div> 
			<div class="boxt" >
				<div class="infos">
					<span>
						<img src="../assets/login/yaoshi.png" alt="">
						<span>登录密码</span>
					</span>
					<input type="password" v-model="form.password" placeholder="请输入登录密码">
				</div>
			</div> 
			<div class="boxt" >
				<div class="infos">
					<span>
						<img src="../assets/login/yaoshi.png" alt="">
						<span>确认密码</span>
					</span>
					<input type="password" v-model="form.okpassword"  placeholder="请确认登录密码">
				</div>
			</div> 
			<div class="mimax">
				<div></div> 
				<div></div> 
			</div>
			<div class="denglu" @click="zhuce()">确认</div> 
			<div style="height:1rem;"></div> 
		</div>

	  
  </div>
</template>

<script>

export default {
  name: 'inform',
  data () {
    return {
		 start1: false,
		 form:{
				phone:'', 
				password:'',
				num:'',
				okpassword:'',
			}
    }
  },
  methods:{
		  goback () {
						this.$router.go(-1)
        },
	
		//获取验证码
    sendCode1() { 
			 	let self = this;
        let data = self.form;
        let reg_str = /^1\d{10}$/;
        if(!reg_str.test(data.phone)){
         this.$dialog.notify({
              mes: '请输入正确手机号码！',
              timeout: 3000
          });
         return 
        }
						// this.$dialog.loading.open('发送中...'); 
            let url = "/api/login/send";
            self.httpPost(url,{type:3,phone:data.phone},function(res) {
                if (res.code == 200) {
                     self.start1 = true;
                }else{
                   self.$dialog.loading.close(); 
                   self.$dialog.toast({
                      mes: res.msg,
                      icon: 'error',
                      timeout: 1500
                  }); 
                }
            }); 
		}, 
		//找回
		 zhuce:function(){ 
        let self = this;
        let data = self.form;
				let reg_str = /^1\d{10}$/; 
        if(!reg_str.test(data.phone)){
         this.$dialog.notify({
              mes: '请输入正确手机号码！',
              timeout: 3000
          });
         return 
        }
        if(!data.num){
          self.$dialog.notify({
              mes: '请输入验证码！',
              timeout: 3000
          });
          return
        }
        if(!data.password){
          self.$dialog.notify({
              mes: '请输入密码',
              timeout: 3000
          });
          return
        }
        if(data.password.length<6){
          self.$dialog.notify({
              mes: '密码长度不够',
              timeout: 3000
          });
          return
        }
        if(!data.okpassword){
          self.$dialog.notify({
              mes: '请重复密码',
              timeout: 3000
          });
          return
        }
        if(data.okpassword!=data.password){
          self.$dialog.notify({
              mes: '两次密码不一致',
              timeout: 3000
          });
          return
				}
            // self.$dialog.loading.open('重置中...'); 
						let url = "/api/login/reset";
            self.httpPost(url,{phone:data.phone,type:3,code:data.num,password:data.password,repassword:data.okpassword,token:'MTI0JTIzMTUzMTcwNjk2MSUwMA==',user_id:'111'},function(res) {
                if (res.code == 200) {
                    
                }else{
                   self.$dialog.loading.close(); 
                   self.$dialog.toast({
                      mes: res.msg,
                      icon: 'error',
                      timeout: 1500
                  }); 
                }
            }); 
      }
	},
	created(){
				 
	}
}
</script>


<style scoped>
.top{
	width:100%;
	height:3.22rem;
	background: #b63554;
	display: flex;
	justify-content: center;
	align-items: center;
}
.top .pic{
	width:1.28rem;
	height:1.28rem;
	border-radius: 50%;
}
.top .pic img{
	width:100%;
	height:100%;
	border-radius: 50%;
}
.tab{
	width:100%;
	height:1rem;
	background: #ff485c;
	display: flex;
}
.tab>div{
	width:50%;
	text-align: center;
	color:#FFF;
	font-size: .32rem;
	line-height: 1rem;
}
.activ{
	position: relative;
}
.activ::after{
	display: block;
	content: "";
	clear: both;
	position: absolute;
	border-left: 7px solid transparent;
	border-right: 7px solid transparent;
	border-top: 7px solid transparent;
	border-bottom: 7px solid #FFF;
	bottom:0;
	left:50%;
	margin-left: -7.2px;
}
.list {
  width: 100%;
  padding: 0 0.3rem;
  background: #fff;
}
.list .boxt {
  width: 100%;
  height: 1rem;
  background: #fff;
  display: flex;
  align-items: center;
}
.list .boxt .info {
  width: 100%;
  height: 100%;
  line-height: 1.4rem;
  border-bottom: 1px solid #eee;
}

.list .boxt .info span {
  font-size: 0.28rem;
  color: #707070;
	/* width: 1.2rem; */
	display: inline-block;
}
.boxt span {
  font-size: 0.28rem;
  color: #333;
}
.info>span{
	display: flex;
	align-items: center;
}
 
 
.infos{
	padding-top: .15rem;
	border-bottom: 1px solid #eee;
	width: 100%;
	display: flex;
	height: 1rem;
	align-items: center;
}
.infos input{
	height: .7rem;
	flex: 1;
	border: none;
	color: #333;
	font-size: .3rem;
	font-family: "微软雅黑";
}
.infos span{
	display: flex;
	align-items: center;
	color: #333;
	width: 1.9rem;
	font-size: .31rem;
}
.infos img{
	width: .36rem;
	margin-right: .15rem;
	position: relative;
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #9e9e9e;
}
input:-moz-placeholder,
textarea:-moz-placeholder {
  color: #9e9e9e;
}
input::-moz-placeholder,
textarea::-moz-placeholder {
  color: #9e9e9e;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: #9e9e9e;
}
.mimax{
	font-size: .25rem;
	height: 1rem;
	align-items: center;
	color: #666;
	display: flex;
	justify-content: space-between;
}
.denglu{
	height: .8rem;
	border-radius: 25px;
	text-align: center;
	background: #ff485c;
	font-size: .35rem;
	color: #fff;
	line-height: .8rem;
}
.ddd{
	margin-top: 1rem;
}
	.iok{
			width: 100%;
			line-height: .8rem;
			color: #fff;
			text-align: center;
			font-size: .4rem;
			background-color: #ff485c;
	}
	.xyi{
		text-align: center;
		line-height: .8rem;
		color: #333;
		font-size: .32rem;
	}
</style> 
